<template>
  <div class="register">
    <div class="registerInfo">
      <div class="title">
        <div class="banner"></div>
        <span>哇塞电影 - 注册</span>
      </div>
      <div class="userAndpass">
        <span>UserName</span>
        <el-input v-model="username" placeholder="请输入用户名"></el-input>
        <br />
        <span>PassWord</span>
        <el-input
          placeholder="请输入密码"
          v-model="password"
          show-password
        ></el-input>
        <!-- 确认密码 -->
        <span>Check PassWord</span>
        <el-input
          placeholder="请确认密码"
          v-model="checkpassword"
          show-password
        ></el-input>
      </div>
      <div class="forgetPass">
        <el-checkbox v-model="checked">
          我已同意"哇塞电影"用户注册协议
        </el-checkbox>
      </div>
      <div class="registerbtn">
        <el-button type="primary" @click="gotoHome">SIGN UP</el-button>
      </div>
      <div class="gotoregister">
        <a href="" @click="gotologin">我有账号 去登陆→</a>
      </div>
    </div>
  </div>
</template>

<script>
import { Register } from "@/api/user.js";
export default {
  name: "Register",
  data() {
    return {
      username: "",
      password: "",
      checkpassword: "",
      checked: false,
    };
  },
  methods: {
    gotologin: function () {
      this.$router.push({ name: "Login" });
    },
    gotoHome: function () {
      if (this.password !== this.checkpassword) {
        this.$message({
          message: "两次密码不相同",
          type: "warning",
        });
        return;
      } else if (this.checked === false) {
        this.$message({
          message: "请查看用户注册协议并同意",
          type: "warning",
        });
        return;
      }

      const registerInfo = {
        username: this.username,
        password: this.password,
      };
      Register(registerInfo).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "注册成功",
            type: "success",
          });

          this.$router.push({
            name: "Login",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
// 组件
.register {
  a {
    text-decoration: none;
    color: gray;
  }
  width: 100%;
  height: 100%;
  // 大盒子
  .registerInfo {
    width: 480px;
    height: 600px;
    margin: 50px auto;
    // banner和登陆提示
    .title {
      // border: 1px solid red;
      height: 100px;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      // banner
      .banner {
        background-image: url("@/assets/Login/u1.png");
        width: 80px;
        height: 80px;
        background-position: center;
        background-size: cover;
      }
      // 登陆提示
      span:nth-child(2) {
        display: inline-block;
        font-size: 30px;
        line-height: 80px;
        font-weight: bold;
        margin-left: 50px;
      }
    }
    // 账号和密码框
    .userAndpass {
      margin: 0 auto;
      span {
        display: block;
        font-size: 20px;
        margin: 20px 0;
        color: gray;
      }
      // .el-input__inner {
      //   height: 50px;
      //   line-height: 50px;
      // }
    }
    .forgetPass {
      display: flex;
      justify-content: left;
      margin-top: 20px;
      font-size: 20px;
    }
    .registerbtn {
      margin-top: 20px;
      .el-button {
        width: 100%;
        height: 50px;
      }
    }
    .gotoregister {
      display: flex;
      justify-content: center;
      margin: 20px auto;
    }
  }
}
</style>